<template>
  <div>
    <div class="pageheader">
      <XHeader
        :left-options="{backText:'',preventGoBack: true}"
        :right-options="{showMore: isShowMoreBut}"
        @on-click-more="onHeaderMare"
        @on-click-back="goBack"
        :title="xheader.title"
        class="XHeader"
      ></XHeader>
    </div>

    <div class="page">
      <div class="block" style="margin-top: 12px">
        <Swiper class="swiper" :list="swipers" :showDescMask="false" auto dots-position="center"></Swiper>
        <!--        <div v-if="swipers.length" class="swiper-block">-->
        <!--          <swiper class="block swiper-container-banner" :options="swiperOptionBanner">-->
        <!--            <swiper-slide v-for="(item, index) in swipers" :key="index">-->
        <!--              <img :src="item.img" style="width: 100%; height: auto">-->
        <!--            </swiper-slide>-->
        <!--          </swiper>-->
        <!--          <div class="swiper-pagination" id="swiper-pagination-banner"></div>-->
        <!--        </div>-->

        <div class="block" style=" padding:12px;  background-color: #ffffff;">
          <div class="title">{{product.goods_name}}</div>
          <div v-if="product.subtitle" class="subtitle">{{product.subtitle}}</div>
          <div v-if="product.other_sku" style="font-size: 13px;color: #9f8d89;margin: 10px 0 0">
            {{textNo(product.supplier_id)}}: {{product.other_sku}}
          </div>

          <!--三峡-->
          <!--          <template v-if="isSanXia">-->
          <template>
            <!--            <div class="pricebar">-->
            <!--              <div class="price">-->
            <!--                <span>-->
            <!--                  ￥{{product.internal_price}}-->
            <!--                  <span class="n-price">e购价</span>-->
            <!--                </span>-->
            <!--                <span class="other-price"><span class="d-price">￥{{product.reference_price}}</span> {{textOldPrice(product.supplier_id)}} </span>-->
            <!--              </div>-->
            <!--              <div class="other-stock">库存：{{product.goods_storage>0?'有货':'售罄'}}</div>-->
            <!--            </div>-->
            <div class="pricebar">
              <div class="price">￥{{product.internal_price}}<span class="n-price"> {{priceText}} </span>
              </div>
              <div class="other-stock" style="margin-bottom: 0">库存：{{textStock}}</div>
            </div>

            <div class="list-price" style="font-size: 13px !important;">
              <div class="oldPrice"><span>￥{{product.reference_price }} </span> {{textOldPrice(product.supplier_id)}}
              </div>
              <div v-if="discountClass(product.discount_rate)" class="discount"
                   :class="discountClass(product.discount_rate)">
                折扣率 {{product.discount_rate}}%
              </div>
            </div>

            <!-- <div class="coupon">
              <div class="text">优惠券：满200减50 满399-100</div>
            </div>-->
            <div class="describe" style="margin-top: 14px">
              <div style="flex:1" class="brokerageitem">
                <div class="quantity">
                  <div class="minus" @click="onMinus">-</div>
                  <div class="num">{{goods_number}}</div>
                  <div class="plus" @click="onPlus">+</div>
                  <div style="margin-left: 13px;font-size: 13px;">起订量 {{product.goods_moq}}</div>
                </div>
              </div>
              <div @click="share(Enum.URL_TYPE.COLLEAGUE)">分享
                <chimage class="icon" mode="aspectFit" :src="require('@/assets/img/ic_share_btn.png')"></chimage>
              </div>
            </div>

            <div class="describe" v-if="isActivity.isSeckill">
              <div style="margin-right: 20px">距离结束还剩</div>
              <div style="color:#AE2309;">
                <clocker :time="product.join_activity_info && product.join_activity_info.seckill_endtime"
                         :format="'%H : %M : %S'" @on-finish="getInfo"></clocker>

              </div>
            </div>
            <div class="describe" style="margin-top: 14px">
              <div style="flex:1" class="brokerageitem">
                <div class="quantity">
                  <div style="font-size: 13px;" v-if="shopTips.show">销量: {{shopTips.sellerNum}}</div>
                </div>

              </div>
            </div>
          </template>

          <!--非三峡-->
          <template v-if="false">
            <div class="pricebar">
              <div class="price">
                ￥{{product.internal_price}}
                <span class="n-price">{{priceText}}</span>
              </div>
              <div>
                <span class="d-price">￥{{product.reference_price}} {{textOldPrice(product.supplier_id)}}</span>
              </div>
            </div>
            <!-- <div class="coupon">
              <div class="text">优惠券：满200减50 满399-100</div>
            </div>-->
            <div class="describe list-price" style="margin: 10px 0 16px;">
              <div v-if="discountClass(product.discount_rate)" class="discount"
                   :class="discountClass(product.discount_rate)">
                折扣率 {{product.discount_rate}}%
              </div>
              <div>库存：{{textStock}}</div>
            </div>

            <div class="describe" style="margin-top: 14px">
              <div style="flex:1" class="brokerageitem">
                <div class="quantity">
                  <div class="minus" @click="onMinus">-</div>
                  <div class="num">{{goods_number}}</div>
                  <div class="plus" @click="onPlus">+</div>
                  <div style="margin-left: 13px;font-size: 13px;">起订量 {{product.goods_moq}}</div>
                </div>
              </div>
            </div>
            <!--分享类型-->
            <div class="share_link">
              <div class="share_link_con" @click="share(Enum.URL_TYPE.FRIEND)"><i></i><span>分享给朋友</span></div>
              <div class="share_link_bo">|</div>
              <div class="share_link_con" @click="share(Enum.URL_TYPE.COLLEAGUE)"><i></i><span>分享给同事</span></div>
            </div>
            <div class="describe" v-if="isActivity.isSeckill">
              <div style="margin-right: 20px">距离结束还剩</div>
              <div style="color:#AE2309;">
                <clocker :time="product.join_activity_info && product.join_activity_info.seckill_endtime"
                         :format="'%H : %M : %S'" @on-finish="getInfo"></clocker>
              </div>
            </div>
          </template>

        </div>
      </div>

      <!--商品规格-->
      <div class="block" @click="onShowSpecs" v-if="featureList.length">
        <div class="listitem">
          <div class="text">规格: <span class="">{{specsName(skuName)}}</span>
          </div>
        </div>
      </div>

      <div class="formitem" style="margin: 0 12px; padding: 12px;">
        <label class="label">地区:</label>
        <areaSelect style="flex:1" @change="onAreaSelectChange" :areavalue="addressAreas">
          <div v-if="area_info" class="picker">
            <span>{{area_info}}</span>
          </div>
          <div v-else>请选择地址</div>
        </areaSelect>
      </div>

      <div class="formitem" style="margin: 0 12px; padding: 12px;align-items: start" v-if="freightText">
        <label class="label">运费:</label>
        <span style="color: #9f8d89" v-html="freightText"></span>
      </div>

      <!--发货提示-->
      <div class="block shop-tip" v-if="shopTips.show">
        <!--        <div class="shop-tip-tex">发货提示: 由<span class="shop-tip-red">京东</span>发货, 并提供售后服务</div>-->
        <!--        <div class="shop-tip-red shop-tip-tex">服务提示: 改商品支持7天无理由退货</div>-->
        <!--        <div class="shop-tip-tex">服务电话: 18180195153</div>-->
        <div class="shop-tip-tex">
          <img :src="require('@/assets/img/icon-tip.png')">
          <span>{{shopTips.shipping}}</span>
        </div>

        <div class="shop-tip-tex">
          <img :src="require('@/assets/img/icon-tip.png')">
          <span>{{shopTips.noReasonTip}}</span>
        </div>

        <div class="shop-tip-tex">
          <!--            <img :src="require('@/assets/img/icon-tip.png')">-->
          <a class="shop-tip-red" style="text-decoration: none" :href='"tel:"+shopTips.tel'>服务电话 {{shopTips.tel}}</a>
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onComment">
          <div class="text">评论数: <span class="redtext">{{commentTotal}}人</span>
          </div>
          <div class="text">好评率: <span class="redtext">{{rateAcclaim}}</span>
          </div>
          <div class="desc">查看全部评价</div>
        </div>
      </div>

      <mallinfo :tab="tab" :supplierId="supplierId"></mallinfo>

      <div class="operation" v-if="product.goods_sku">
        <img style="width: 34px;margin: 0 8.5px 0 20px;" class="service" src="@/assets/img/goode_detail_home.svg"
             @click="$router.push({name: 'mall'})"/>
        <span class="goodsNumList">
          <span class="goodsNum" v-if="goodsNum">{{goodsNum}}</span>
          <img class="shopping" src="@/assets/img/ic_shopping2.png" @click="onCart"/>
        </span>

        <!--秒杀按钮-->
        <template v-if="isActivity.isSeckill">
          <div class="shop" @click="onClearing">立即秒杀</div>
        </template>

        <template v-else>
          <div class="add" @click="onAddToCart">加入购物车</div>
          <div class="shop" @click="onClearing">立即购买</div>
        </template>

      </div>
    </div>
    <actionsheet v-model="isShowMore" :menus="menus" @on-click-menu="menusFun" :show-cancel="true"></actionsheet>

    <input
      type="text"
      readonly
      class="clipBoardContent"
      id="clipBoardContent"
      v-model="clipBoardContent"
    />

    <!-- 分享指示-->
    <ShareGuide v-model="isShowShare"></ShareGuide>

    <!--规格弹窗-->
    <popup max-height="70%" v-model="showSpecs" v-if="featureList.length">
      <div class="specs">
        <div class="specs-close">
          <span @click="onCloseSpecs">×</span>
        </div>
        <div class="specs-shop">
          <img class="specs-shop-img" :src="swipers[0] && swipers[0].img">
          <div class="specs-shop-con">
            <div class="specs-shop-con-price">￥{{product.internal_price}}</div>
            <div class="specs-shop-con-no" v-if="product.other_sku">编号: {{product.other_sku}}</div>
          </div>
        </div>
        <div class="specs-main">
          <div class="specs-main-con" v-for="(item, index) in featureList" :key="index">
            <div class="specs-main-con-title">{{item.attribute_name}}</div>
            <div class="specs-main-con-box">
              <div :class="['specs-main-con-box-item', child.select ? 'specs-main-con-box-item-checked' : null]"
                   v-for="(child, childIndex) in item.feature_value"
                   :key="childIndex"
                   @click="onCheckedSpecs(item, index, child, childIndex)"
              >
                {{child.feature_value}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
  import { share } from '@/mixin/share'
  import specs from '@/mixin/specs'
  import Product from '@/dll/product'
  import Me from '@/dll/me'
  import Util from '@/utils/util'
  import Mall from '@/dll/mall'
  // import { swiper, swiperSlide } from 'vue-awesome-swiper'
  // import 'swiper/dist/css/swiper.css'
  import eventBus from '../../../utils/eventBus.js'

  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: 'info',
    mixins: [share, specs],
    // components: {
    //   swiper,
    //   swiperSlide
    // },
    data: () => {
      let isShowMoreBut = Util.isWeixn()
      let isUleeCommunityAPP = Util.isUleeCommunityAPP()
      let menus = []
      if (isUleeCommunityAPP) {
        menus = [
          { label: '分享到微信', value: 'shareAppMessage' },
          { label: '分享到朋友圈', value: 'shareTimeline' }
        ]
      } else {
        menus = [{ label: '复制连接地址', value: 'copy' }]
      }
      let addressAreas = JSON.parse(localStorage.jddzqy || '[]')
      return {
        xheader: {
          title: '商品详情'
        },
        swipers: [],
        tab: [],
        id: '',
        product: {},
        goods_number: 1,
        isShowMoreBut: !isShowMoreBut,
        isShowMore: false,
        menus: menus,
        clipBoardContent: '',
        area_info: '',
        addressAreas: addressAreas,
        supplierId: 0,
        area_code_str: '',
        // swiperOptionBanner: {
        //   spaceBetween: 12,
        //   autoplay: 2000,
        //   centeredSlides: true,
        //   disableOnInteraction: false,
        //   pagination: {
        //     el: '#swiper-pagination-banner'
        //   }
        // }
        goodsAdditionalInfo: {}, // 商品额外信息
        commentTotal: 0, // 评论数
        isStock: false, // 判断库存是否请求完成
        isStockNum: true, // 防止重复请求库存

        isRefreshGoBack: false, // 返回上一页是否刷新页面

        showSpecs: false, // 是否显示规格弹窗
        featureList: [], // 规格数据
        skuList: [], // 选中规格sku
        skuName: [], // 选中规格name数组

        goodsStock: {}
      }
    },
    watch: {
      area_code_str (val, oldVal) { // 苏宁商品会根据地址不同价钱也会不同
        if (oldVal && oldVal !== val) {
          if (this.isSuNing(this.product.supplier_id)) {
            this.getInfo({ area_code: this.area_code_str })
          }
        }
      }
    },

    computed: {
      ...mapGetters(['isShowSpecs']),

      // 发货提示
      shippingTips () {
        let isFactoryShip = parseFloat(this.product.isFactoryShip) // 是否厂直商品，1：厂家直供，0：非厂家直供
        let isJDLogistics = parseFloat(this.product.isJDLogistics) // 是否京东配送，1：京东配送，0：非京东配送
        if (isFactoryShip === 1 && isJDLogistics === 1) {
          return `京东配送，并提供售后服务`
        } else if (isFactoryShip === 1 && isJDLogistics === 0) {
          return `第三方配送，京东提供售后服务`
        } else if (isFactoryShip === 0 && isJDLogistics === 1) {
          return `京东配送，第三方提供售后服务`
        } else if (isFactoryShip === 0 && isJDLogistics === 0) {
          return `第三方配送，并提供售后服务`
        }
        return `京东配送，并提供售后服务`
      },

      // 服务提示
      shopTips () {
        let tip = {}

        if ((this.isJinDong(this.product.supplier_id) || this.isSuNing(this.product.supplier_id)) && this.goodsAdditionalInfo && this.goodsAdditionalInfo.goods_info) {
          // tip.commentNum = this.$refs.shopDetail.commentType.TTotal.count || 0
          tip.show = true
          tip.sellerNum = this.goodsAdditionalInfo.goods_info.sellerNum || 0
          tip.tel = this.goodsAdditionalInfo.goods_info_jd.costomer_tel || this.goodsAdditionalInfo.goods_info_sn.costomer_tel

          if (this.isJinDong(this.product.supplier_id)) {
            tip.supplier = '京东'
            if (parseFloat(this.goodsAdditionalInfo.goods_info_jd.isJdSend)) {
              tip.shipping = `京东配送，并提供售后服务`
            } else {
              tip.shipping = `第三方商家配送，并提供售后服务`
            }
            tip.noReasonTip = this.goodsAdditionalInfo.goods_info_jd.noReasonTip
          } else if (this.isSuNing(this.product.supplier_id)) {
            tip.supplier = '苏宁'
            if (parseFloat(this.goodsAdditionalInfo.goods_info_sn.isSnSend)) {
              tip.shipping = `苏宁配送，并提供售后服务`
            } else {
              tip.shipping = `第三方商家配送，并提供售后服务`
            }
            tip.noReasonTip = this.goodsAdditionalInfo.goods_info_sn.noReasonTip
          }
        } else {
          tip = {
            show: false,
            shipping: '', // 发货提示
            sellerNum: 0, // 销量
            tel: null, // 服务电话
            supplier: null, // 供应商
            commentNum: 0, // 评论数
            noReasonTip: null // 无理由退货文案
          }
        }
        return tip
      },

      // 活动判断
      isActivity () {
        let activity = {
          isDiscount: false, // 是否折扣
          isGroup: false, // 是否拼团
          groupbuyId: 0, // 拼团ID
          isSeckill: false, // 是否秒杀
          isDefault: false // 普通
        }
        if (this.product.join_activity_info && !this.product.join_activity_info.activity_type) {
          activity.isDefault = true
        } else {
          let type = this.product.join_activity_info && this.product.join_activity_info.activity_type
          if (type === 'discount') {
            activity.isDiscount = true
          }
          if (type === 'groupbuy') {
            activity.isGroup = true
            activity.groupbuyId = this.product.join_activity_info.groupbuy_id
          }
          if (type === 'seckill') {
            activity.isSeckill = true
          }
        }
        return activity
      },

      // 价钱文案的显示
      priceText () {
        if (this.isActivity.isDiscount) {
          return '折扣价'
        } else if (this.isActivity.isGroup) {
          return '拼团价'
        } else if (this.isActivity.isSeckill) {
          return '秒杀价'
        } else {
          return this.textNewPrice
        }
      },

      // 有货无货的显示
      textStock () {
        if (!this.area_info) {
          return '--'
        } else if (this.isStock) {
          if (this.product.goods_storage > 0) {
            return '有货'
          } else {
            return '售罄'
          }
        } else {
          return '--'
        }
      },

      // 判断输入框数量是否小于起订量
      isGoodsMoq () {
        return parseFloat(this.goods_number) <= parseFloat(this.product.goods_moq)
      },

      // 运费的显示问题
      freightText () {
        let _text = ''
        if (this.goodsStock && this.goodsStock[this.product.supplier_id] && this.goodsStock[this.product.supplier_id][this.product.goods_sku] && this.goodsStock[this.product.supplier_id][this.product.goods_sku].freight_rule_type) {
          let ruleType = parseFloat(this.goodsStock[this.product.supplier_id][this.product.goods_sku].freight_rule_type)
          let freightRule = this.goodsStock[this.product.supplier_id][this.product.goods_sku].freight_rule
          if (ruleType === 1) { // 免运费
            _text = '免运费'
          }
          if (ruleType === 2) { // 不免运费
            if (!parseFloat(freightRule.rule_freight_free_num)) { // 不存在满多少包邮
              _text = `${freightRule.rule_freight_base_num}件及以下${freightRule.rule_freight_base}元，${freightRule.rule_freight_base_num}件以上，每${freightRule.rule_freght_incre_num}件增加${freightRule.rule_freght_incre}元`
            } else {
              _text = `满${freightRule.rule_freight_free_num}件包邮，${freightRule.rule_freight_base_num}件及以下${freightRule.rule_freight_base}元，${freightRule.rule_freight_base_num}件以上，每${freightRule.rule_freght_incre_num}件增加${freightRule.rule_freght_incre}元`
            }
          }
          if (ruleType === 3) { // 暂不配送
            _text = this.goodsStock[this.product.supplier_id][this.product.goods_sku].refuse_delivery_reason
          }
        }
        return _text
      }
    },

    // 创建完成后
    created () {
      this.id = this.$route.params.id
      // this.showSpecs = this.isShowSpecs
      this.init()
    },
    methods: {
      ...mapMutations(['getDefaultAddress', 'setShowSpecs']),

      init () {
        this.swipers = []
        this.getInfo()
        this.getImages()
        this.GET_GOODS_NUM()
        this.getGoodsAdditionalInfo()
        this.getCommentInfo()
      },

      onHeaderMare () {
        this.isShowMore = true
      },

      onCart () {
        this.$router.push({ name: 'shopping' })
      },
      // 减数量
      onMinus () {
        if (parseFloat(this.goods_number) <= parseFloat(this.product.goods_moq)) {
          this.$vux.toast.text('不能小于起订量')
        } else {
          this.goods_number = this.goods_number - 1
        }
      },
      // 加数量
      onPlus () {
        // if (!this.area_info && (this.isJinDong(this.product.supplier_id) || this.isSuNing(this.product.supplier_id))) {
        if (!this.area_info) { // 新版： 不管是哪个供应商都需要选择地址
          this.$vux.alert.show({
            title: '提示',
            content: '请先选择一个地区'
          })
          return
        }
        if (this.goods_number >= this.product.goods_storage) {
          this.$vux.alert.show({
            title: '提示',
            content: '商品库存不足'
          })
        } else {
          this.goods_number = this.goods_number + 1
        }
      },

      // 添加到购物车
      async onAddToCart () {
        // if (!this.area_info && (this.isJinDong(this.product.supplier_id) || this.isSuNing(this.product.supplier_id))) {
        if (!this.area_info) { // 新版： 不管是哪个供应商都需要选择地址
          this.$vux.alert.show({
            title: '提示',
            content: '请先选择一个地区'
          })
          return
        }
        if (this.product.goods_storage <= 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '库存不足，无法加入购物车'
          })
          return
        }

        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Me.addCartGoods(this.id, this.goods_number)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.GET_GOODS_NUM()
          this.$vux.alert.show({
            title: '提示',
            content: '已加入购物车'
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },
      // 结算
      onClearing () {
        // if (!this.area_info && (this.isJinDong(this.product.supplier_id) || this.isSuNing(this.product.supplier_id))) {
        if (!this.area_info) { // 新版： 不管是哪个供应商都需要选择地址
          this.$vux.alert.show({
            title: '提示',
            content: '请先选择一个地区'
          })
          return
        }
        if (this.product.goods_storage <= 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '库存不足，无法购买。'
          })
          return
        }
        if (this.goods_number < parseFloat(this.product.goods_moq)) {
          this.$vux.alert.show({
            title: '提示',
            content: `商品起订量${this.product.goods_moq}`
          })
          return
        }
        let items = []
        let product = this.product
        product.goods_number = this.goods_number
        items.push({
          goods_sku: product.goods_sku,
          goods_number: this.goods_number
        })
        this.$router.push({
          name: 'mallClearing',
          query: { items: JSON.stringify(items), if_cart: 0 }
        })
      },
      // 获取详情 stock:地址code
      async getInfo (stock = {}) {
        let param = { goods_sku: this.id, ...stock }
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Product.getGoodsDetail(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.goods_number = res.data.goods_moq
          let product = res.data
          this.supplierId = parseInt(res.data.supplier_id)
          let tab = Util.infoTab(product)
          this.product = product
          this.featureList = res.data.feature_list || []
          this.skuList = res.data.sku_list || []
          this.skuName = res.data.sku_name || []
          this.xheader.title = product.goods_name
          this.tab = tab
          // this.swipers = [].concat(this.swipers, {
          //   url: 'javascript:',
          //   img: product.goods_image_main
          // })
          if (Util.isWeixn()) {
            this.updateAppMessageShareData()
          }

          if (this.addressAreas.length && this.isStockNum) {
            this.onAreaSelectChange(this.addressAreas)
          }
          this.setImg()
        } else {
          this.$vux.confirm.show({
            title: '提示',
            content: res.msg,
            showCancelButton: false,
            onConfirm: () => {
              this.$router.back()
            }
          })
        }
      },
      // 获取图片
      async getImages () {
        let res = await Product.getGoodsImages(this.id)
        if (res.code == 0) {
          this.swipers = [].concat(
            this.swipers,
            res.data.map(item => {
              return {
                url: 'javascript:',
                img: item
              }
            })
          )
        }
      },
      // 区域更新
      onAreaSelectChange (detail) {
        let area_info = []
        for (var i in detail) {
          area_info.push(detail[i].area)
        }

        this.isRefreshGoBack = detail != this.addressAreas

        this.addressAreas = detail
        let province = {}
        let city = {}
        let area = {}
        let street = {}
        detail.map((item, index) => {
          if (index == 0) {
            province = item
            return
          }
          if (index == 1) {
            city = item
            return
          }
          if (index == 2) {
            area = item
            return
          }
          if (index == 3) {
            street = item
          }
        })
        this.area_code_str = `${province.id}_${city.id}_${area.id}_${street.id || 0}`
        this.area_info = area_info.join(' ')
        // if (this.isJinDong(this.product.supplier_id) || this.isSuNing(this.product.supplier_id)) {
        this.getJdInventory() // 新版： 不管是哪个供应商都需要选择地址
        // }
        this.getDefaultAddress({ code: this.area_code_str, info: this.area_info, arr: this.addressAreas })
      },
      // 获取JD库存
      async getJdInventory () {
        this.isStock = false
        let supplier_goods = [{
          supplier_id: this.product.supplier_id,
          goods_skus: [{ goods_sku: this.product.goods_sku, num: this.goods_number }]
        }]

        let param = {
          supplier_goods: JSON.stringify(supplier_goods),
          area_code: this.area_code_str
        }

        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Product.getGoodsStocks(param)
        this.$vux.loading.hide()
        this.isStock = true
        this.isStockNum = false
        this.goodsStock = res.data
        if (res.code == 0) {
          if (res.data[this.product.supplier_id][this.product.goods_sku].stockStateDesc == '有货') {
            this.product.goods_storage = 9999
          } else {
            this.product.goods_storage = 0
          }
        } else {
          this.product.goods_storage = 0
        }
      },

      // 获取商品额外信息
      async getGoodsAdditionalInfo () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Product.getGoodsAdditionalInfo({ goods_sku: this.id })
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.goodsAdditionalInfo = res.data
        }
      },

      // 获取商品评论统计信息
      getCommentInfo () {
        let params = {
          goods_sku: this.id
        }
        Mall.getCommentInfo(params).then(res => {
          if (res.code == 0) {
            this.commentTotal = res.data.comment_total
          }
        })
      },
      goBack () {
        this.onCloseSpecs()
        if (this.isRefreshGoBack) {
          eventBus.$emit('defaultAddress', {
            flag: true,
            obj: { code: this.area_code_str, info: this.area_info, arr: this.addressAreas }
          })
        }
        // eventBus.$emit('defaultAddress', { code: this.area_code_str, info: this.area_info, arr: this.addressAreas })

        // defaultAddress:this.area_code_str=,
        this.$router.go(-1)
        // this.$router.back(-1)
        // this.$router.push({ name: 'special', params: {defaultAddress:this.area_code_str,item:this.$route.params.item} })
      },

      // 显示规格弹窗
      onShowSpecs () {
        this.showSpecs = true
      },

      // 选择规格
      onCheckedSpecs (item, index, child, childIndex) {
        let _sku = []

        // 将当前所点击的属性的兄弟元素的选中效果置为空
        this.featureList[index]['feature_value'].forEach((n, i) => {
          if (n['select'] === 1) {
            this.featureList[index]['feature_value'][i]['select'] = 0
          }
        })

        // 将当前所点击的属性选中
        this.featureList[index]['feature_value'][childIndex]['select'] = 1

        // 遍历出所有选中的规格
        this.featureList.forEach((n, i) => {
          n['feature_value'].forEach((x, y) => {
            if (x.select === 1) {
              _sku.push(x.id)
            }
          })
        })

        // 根据所有选中的规格再遍历出商品sku
        this.skuList.forEach((n, i) => {
          if (this.skuSort(n.value_id_list) === this.skuSort(_sku)) {
            this.id = n.goods_sku
          }
        })

        // this.setShowSpecs(true)
        //
        // // 再跳转
        // this.$router.replace({
        //   name: 'mallInfo',
        //   params: { id: this.id }
        // })
        this.init()
      },

      // 选中规格排序
      skuSort (data) {
        return (data.sort((item1, item2) => {
          return item1 - item2
        })).toString()
      },

      // 关闭规格弹窗
      onCloseSpecs () {
        // this.setShowSpecs()
        this.showSpecs = false
      }
    }
  }
</script>
<style lang="less" scoped>
  .page {
    padding-bottom: 59px;
  }

  .swiper {
    height: 350px;
    background-color: #fff;
  }

  .slide-image {
    height: 350px;
    width: 100%;
    display: block;
  }

  .title {
    font-size: 16px;
    color: #351009;
    line-height: 22px;
  }

  .subtitle {
    font-size: 14px;
    color: #d8d0ce;
    line-height: 20px;
  }

  .pricebar {
    margin-top: 24px;
    display: flex;
    align-items: center;
  }

  .pricebar .price {
    flex: 1;
    font-size: 20px;
    color: #ae2309;
    line-height: 28px;
  }

  .pricebar .n-price {
    font-size: 13px;
    /*background: #fff100;*/
    /*padding: 1px 4px;*/
  }

  .pricebar .d-price {
    font-size: 13px;
    color: #9f8d89;
    line-height: 20px;
    text-decoration: line-through;
  }

  .other-price {
    font-size: 13px;
    color: #9f8d89;
    display: block;
    line-height: 1;
  }

  .other-stock {
    font-size: 13px;
    color: #9f8d89;
    margin-bottom: 17px;
  }

  .icon {
    width: 18px !important;
    height: 18px !important;
    vertical-align: text-top;
  }

  .coupon {
    margin-top: 8px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
  }

  .coupon::before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .coupon .text {
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
  }

  .describe {
    display: flex;
    margin-top: 8px;
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
    align-items: center;
  }

  .listitem {
    display: flex;
    align-items: center;
    height: 48px;
    box-sizing: border-box;
    padding: 14px 16px;
    padding-right: 36px;
    position: relative;
    background-color: #fff;
  }

  .listitem::before {
    content: " ";
    display: block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 0;
    margin-right: 16px;
  }

  .listitem .text {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .listitem .desc {
    font-size: 15px;
    color: #351009;
    line-height: 21px;
  }

  .redtext {
    color: #ae2309;
  }

  .operation {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    height: 49px;
    align-items: center;
  }

  .operation .service {
    width: 49px;
    height: 49px;
    margin-left: 12px;
    display: block;
  }

  .operation .shopping {
    width: 49px;
    height: 49px;
    display: block;
    margin-right: 12px;
  }

  .operation .add {
    flex: 1;
    font-size: 14px;
    color: #fff;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #eca13e;
  }

  .operation .shop {
    flex: 1;
    font-size: 14px;
    color: #fff;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #ae2309;
  }

  .brokerageitem .quantity {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
  }

  .brokerageitem .quantity .minus,
  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .quantity .num {
    display: block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    color: #ae2309;
    text-align: center;
  }

  .formitem {
    background-color: #fff;
    display: flex;
    padding: 14px 24px;
    box-sizing: border-box;
    align-items: center;
  }

  .formitem .label {
    display: block;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    width: 52px;
    flex-shrink: 0;
  }

  .formitem input,
  .formitem picker,
  .placeholder,
  .formitem areaSelect {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .formitem .picker {
    position: relative;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    min-height: 21px;
    display: block;
    box-sizing: border-box;
    padding-right: 15px;
  }

  .formitem .picker:before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .discount {
    height: 16px;
    line-height: 16px;
  }

  .shop-tip {
    background: #fff;
    margin: 0 12px;
    color: #9f8d89;
    padding: 15px 10px;
    display: flex;
    flex-wrap: wrap;

    .shop-tip-red {
      color: #ae2309;
    }

    .shop-tip-tex {
      display: flex;
      align-items: center;
      margin-right: 4%;
      padding: 5px 0;
      font-size: 14px;

      img, span {
        flex-shrink: 0;
      }

      img {
        width: 18px;
        height: 18px;
        margin-right: 2%;
      }
    }
  }

  /*规格*/
  .specs {
    background: #fff;
    padding: 12px;

    .specs-close {
      display: flex;
      justify-content: flex-end;

      span {
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: #ece8e6;
        margin: 10px;
        line-height: 16px;
      }
    }

    .specs-shop {
      display: flex;
      align-items: flex-end;

      .specs-shop-img {
        width: 100px;
        height: 100px;
      }

      .specs-shop-con {
        margin-left: 15px;

        .specs-shop-con-price {
          font-weight: bold;
          font-size: 16px;
          color: #ae2309;
        }

        .specs-shop-con-no {
          font-size: 12px;
          color: #9f8d89;
          margin-top: 5px;
        }
      }
    }

    .specs-main {
      margin-top: 12px;

      .specs-main-con {
        margin-bottom: 15px;

        .specs-main-con-title {
          color: #351009;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .specs-main-con-box {
          display: flex;

          .specs-main-con-box-item {
            font-size: 12px;
            color: #9f8d89;
            margin: 0 6px;
            padding: 4px 14px;
            background: #fbf8f7;
            border: 1px solid #fbf8f7;
            border-radius: 15px;
          }

          .specs-main-con-box-item-checked {
            border-color: #ae2309;
          }
        }
      }
    }
  }

</style>
